<template>
  <div class="panel">
    <div class="panel-header">
      <span class="panel-more">
        <a
          @click="toReying"
          class="textcolor_red"
          data-act="all-playingMovie-click"
        >
          <span>全部</span>
        </a>
        <span class="panel-arrow panel-arrow-red"></span>
      </span>
      <span class="panel-title">
        <span class="textcolor_red"
          ><h2>正在热映（{{ length }}部）</h2></span
        >
      </span>
    </div>
    <div class="panel-content">
      <dl class="movie-list">
        <dd v-for="(movie, index) in MovieList" :key="movie.id">
          <div class="movie-item">
            <a @click="toDetail(movie.id)" target="_blank">
              <div class="movie-poster">
                <img
                  class="poster-default"
                  src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png"
                />
                <img
                  class="movie-poster-img"
                  alt="灌篮高手电影海报"
                  :src="movie.mImage"
                />
                <div class="movie-overlay movie-overlay-bg">
                  <div class="movie-info">
                    <div class="movie-score">
                      <i v-if="movie.mScore !== 0" class="integer"
                        >{{ integer(movie.mScore) }}.</i
                      >
                      <i v-if="movie.mScore !== 0" class="fraction">{{
                        fraction(movie.mScore)
                      }}</i>
                    </div>
                    <div class="movie-title" :title="movie.mName">
                      {{ movie.mName }}
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="movie-detail movie-detail-strong movie-sale">
              <a @click="toPay(movie.id)" class="active" target="_blank"
                >购 票</a
              >
            </div>
            <div class="movie-ver"><i class="imax2d"></i></div>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getHotMovieCount, getHotMovie } from '@/api/movie'
export default {
  name: 'TtmsWeilreceive',

  data () {
    return {
      length: 0,
      MovieList: []
    }
  },

  async mounted () {
    const data = await getHotMovieCount()
    const data1 = await getHotMovie()
    this.length = data.data
    this.MovieList = data1.data
  },

  methods: {
    toReying () {
      this.$router.push({ name: 'film', params: { showType: 1 } })
    },
    toDetail (id) {
      // 路由传递参数
      this.$router.push({
        name: 'toDetail',
        params: { id: id }
      })
    },
    toPay (id) {
      // 路由传递参数
      this.$router.push({ name: 'plan', query: { movieId: id } })
    },
    getScore (score) {
      return score === 0 ? '暂无评分' : (parseInt(score * 10) / 10) * 2
    },
    // 小数点之前的数字
    integer (score) {
      return parseInt(this.getScore(score))
    },
    // 小数点之后的数字
    fraction (score) {
      return parseInt((this.getScore(score) - this.integer(score)) * 10)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("@/assets/css/panel.css");
a {
  cursor: pointer;
}
</style>
